<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.appid" placeholder="appid" clearable class="filter-item form-search-input" />
      <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <el-button class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate()">
        新增
      </el-button>
      <el-button v-if="this.selectedIds.length" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">
        批量删除
      </el-button>
    </div>
    <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="appid"   label="appid" />
      <el-table-column prop="product_id"   label="product_id" />
      <el-table-column prop="template_id"   label="template_id" />
      <el-table-column prop="status"   label="代码状态" />
      <el-table-column prop="audit_status"   label="审核状态" />
      <el-table-column prop="creator" label="创建人" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="updated_at" label="更新时间" />
      <el-table-column label="操作" fixed="right" width="400">
        <template slot-scope="module">
          <el-button type="primary" icon="el-icon-refresh" @click="templateConfig(module.row.id)" >配置</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="templateCommit(module.row.id)" >上传</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="templatePreview(module.row.id)" >预览</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="templateAudit(module.row.id)" >提交审核</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="templateRelease(module.row.id)" >发布</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(module.row)" />
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(module.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginate.current"
            hide-on-single-page
            :page-sizes="paginate.sizes"
            :page-size="paginate.limit"
            :layout="paginate.layout"
            :total="paginate.total"/>
    <!----------------------------------- 编辑 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="appid" :label-width="formLabelWidth" prop="appid">
          <el-input v-model="formFieldsData.appid" placeholder="请输入appid" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="product_id" :label-width="formLabelWidth" prop="product_id">
          <el-input v-model="formFieldsData.env" placeholder="请输入product_id" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="template_id" :label-width="formLabelWidth" prop="template_id">
          <el-input v-model="formFieldsData.template_id" placeholder="请输入template_id" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item v-if="!isButton" label="status" :label-width="formLabelWidth" prop="status">
          <el-radio v-model="formFieldsData.status" :label="1" checked>启用</el-radio>
          <el-radio v-model="formFieldsData.status" :label="-1">禁用</el-radio>
        </el-form-item>
        <el-form-item label="ext_json" :label-width="formLabelWidth" prop="ext_json">
          <el-input v-model="formFieldsData.ext_json" placeholder="请输入ext_json" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="user_version" :label-width="formLabelWidth" prop="user_version">
          <el-input v-model="formFieldsData.user_version" placeholder="请输入代码版本号" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="user_desc" :label-width="formLabelWidth" prop="user_desc">
          <el-input v-model="formFieldsData.user_desc" placeholder="请输入代码描述" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="audit_status" :label-width="formLabelWidth" prop="audit_status">
          <el-input v-model="formFieldsData.audit_status" placeholder="请输入审核状态" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="category_list" :label-width="formLabelWidth" prop="category_list">
          <el-input v-model="formFieldsData.category_list" placeholder="请输入可填选的类目列表" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="page_list" :label-width="formLabelWidth" prop="page_list">
          <el-input v-model="formFieldsData.page_list" placeholder="请输入页面配置列表" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="item_list" :label-width="formLabelWidth" prop="item_list">
          <el-input v-model="formFieldsData.item_list" placeholder="提交审核项的一个列表（至少填写1项，至多填写5项）" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="auditid" :label-width="formLabelWidth" prop="auditid">
          <el-input v-model="formFieldsData.auditid" placeholder="提交审核时获得的审核id" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="reason" :label-width="formLabelWidth" prop="reason">
          <el-input v-model="formFieldsData.reason" placeholder="审核不通过原因" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="succ_time" :label-width="formLabelWidth" prop="succ_time">
          <el-input v-model="formFieldsData.succ_time" placeholder="审核成功时间" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="fail_time" :label-width="formLabelWidth" prop="fail_time">
          <el-input v-model="formFieldsData.fail_time" placeholder="审核失败时间" autocomplete="off" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--------------------------------- 预览小程序体验二维码 ------------------------------------------------------->
    <el-dialog title="小程序体验二维码" :visible.sync="visable">
      <el-image
              style="width: 200px;"
              :src="experience_qrcode">
      </el-image>
    </el-dialog>
  </div>
</template>
<script>
  import formOperate from '@/layout/mixin/formOperate'
  import { parseTime } from '@/utils'

  export default {
    name:'miniapp_miniappVersion',
    mixins: [formOperate],
    data() {
      return {
        formName: 'miniappCloud',
        formLabelWidth: '120px',
        // 刷新路由
        refreshRoute: true,
        // 用户搜索
        queryParam: {
          appid: '',
        },
        formVisible: false,
        formFieldsData: {
          appid: '',
          product_id: '',
          status: '',
          template_id: '',
          ext_json: '',
          user_version: '',
          user_desc: '',
          audit_status: '',
          category_list: '',
          page_list: '',
          item_list: '',
          auditid: '',

        },
        url: 'wechatMiniappVersion',
        visable: false,
        experience_qrcode: '',
        // 表单验证
        rules: {
          appid: [
            { required: true, message: '请输入appid' }
          ],
          template_id: [
            { required: true, message: '请输入template_id' }
          ]
        }
      }
    },
    methods: {
      templateConfig(id) {
        this.$http.get( 'miniapp/templateConfig/'+id).then(response => {
          this.$message.success(response.message)
        })
      },
      templateCommit(id) {
        this.$http.get( 'miniapp/templateCommit/'+id).then(response => {
          this.$message.success(response.message)
        })
      },
      templatePreview(id) {
        this.$http.get( 'miniapp/templatePreview/'+id).then(response => {
          this.visable = true
          this.experience_qrcode = response.data.experience_qrcode;
          this.$message.success(response.message)
        })
      },
      templateAudit(id) {
        this.$http.get( 'miniapp/templateAudit/'+id).then(response => {
          this.$message.success(response.message)
        })
      },
      templateRelease(id) {
        this.$http.get( 'miniapp/templateRelease/'+id).then(response => {
          this.$message.success(response.message)
        })
      }

    }
  }
</script>
